// 导入useNavigate
import {useNavigate} from 'react-router-dom'

/*
    路由传参，两种方式
    searchParams (相当于vue中的 query)
        传值： navigate('/about?id=1')
        取值： const [params] = useSearchParams()  let id = params.get('id')

    params
        传值： navigate('/about/1')         这个时候再路由匹配的地方需要使用动态路由提前占位
        取值：const params = useParams()  let id = params.id
*/

export default function Login() {
    // 执行useNavigate得到一个跳转函数
    const navigate = useNavigate()
    function goAbout() {
        // 调用跳转函数传入目标路径
        // navigate('/about')
        // 不保留历史记录, 第二个参数传入配置
        // navigate('/about', {replace: true})

        // 路由传参, 取值在 about 组件内
        // navigate('/about?id=1')
        // params传参
        navigate('/about/1')
    }
    return (
        <div>Login
            <button onClick={goAbout}>跳转</button>
        </div>
    )
}
